<template>
  <div class="menu-a">
    <Menu
      text-color="#666"
      active-text-color="#E48B2C"
      :default-openeds="defaultOpen"
      :default-active="defaultActive"
      @select="handleSelect"
      :unique-opened="true"
    >
      <Submenu
        v-for="(item, index) in cate"
        :key="index"
        :index="item.store_category_id + ''"
      >
        <template slot="title">{{ item.cate_name }}</template>
        <menu-item-group>
          <menu-item
            v-for="(item2, index2) in item.children"
            :key="index2"
            :index="item2.store_category_id + ''"
            >{{ item2.cate_name }}</menu-item
          >
        </menu-item-group>
      </Submenu>
    </Menu>
  </div>
</template>

<script>
import { Menu, MenuItem, MenuItemGroup, Submenu } from "element-ui"
import { getMerchantCate } from "@/request/api"

export default {
  name: "MenuA",
  components: { Menu, Submenu, MenuItem, MenuItemGroup },
  props: {
    id: "",
    isDefault: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      cate: [],
      defaultOpen: [],
      defaultActive: ""
    }
  },
  mounted() {
    this.getCate()
  },
  methods: {
    getCate() {
      getMerchantCate(this.id).then((res) => {
          if (res.data.length > 0) {
            this.defaultOpen = [res.data && res.data[0].store_category_id.toString()]
            /* if (this.isDefault) {
              console.log(res.data,'data');
              //todo 不懂这个判断
              // this.defaultActive = res.data[0].children[0].store_category_id.toString()
            } */
            this.cate = res.data
          }
        }).catch((err) => {
          this.$message.error(err.message)
        })
    },
    handleSelect(index) {
      this.$emit("getSelectId", index)
    }
  }
}
</script>

<style lang="scss" scoped>
@import "~@/assets/style/common.scss";

.menu-a {
  /deep/ .el-submenu__title {
    background-color: $theme-color-1;
    color: #fff !important;
  }

  /deep/ .el-submenu__icon-arrow {
    color: #fff;
  }
}
</style>
